<template>
	<view class="container">
		<!-- banner -->
		<image class="banner" :src="details.cover_image" mode="widthFix"></image>
		<!-- 介绍 -->
		<view class="hot-content" v-html="details.content">

		</view>
		<!-- 推荐商品 -->
		<view class="goods-main" v-for="item in goodslist" :key="item.id" @click="navToDetailPage(item.id)">
			<view class="goods-img">
				<image :src="item.fullDefaultImageUrl" mode="aspectFill"></image>
			</view>
			<view class="desc">
				<view class="text-til">
					<text class="hot">热销</text>
					{{item.cName}}
				</view>
				<view class="goods-price">
					<text>￥ {{item.fSalePrice}} /{{item.unit_name}}</text>
					<!-- <text class="goods-hp">95%好评</text> -->
				</view>
				<view class="goods-icon">
					<image src="../../static/img/7/7-7.png" mode="aspectFill"></image>
					<image src="../../static/img/7/7-9.png" mode="aspectFill"></image>
					<image src="../../static/img/7/7-8.png" mode="aspectFill"></image>
				</view>

			</view>
		</view>
		<!-- 分享 -->
		<view class="shaer-main">
			<button type="primary" class="btn">分享有奖</button>
			<view class="shaer-text">
				每个专题每天首次分享即可参与抽奖 <br>
				最高100元优惠券<br>
				（分享后，返回才能抽奖哦)
			</view>
			<view class="share-icon">
				<text @click="collect">
					<image class="icon-sc" :src="isCollect?'../../static/img/3/3-125.png':'../../static/img/7/7-10.png'" mode=""></image>收藏 {{details.collect}}
				</text>
				<text>
					<image class="icon-eye" src="../../static/img/7/7-11.png" mode=""></image>阅读 {{details.look}}
				</text>
				<text>
					<image class="icon-zf" src="../../static/img/7/7-12.png" mode=""></image>转发 {{details.share}}
				</text>
				<text>
					<image class="icon-pl" src="../../static/img/7/7-13.png" mode=""></image>评论 {{details.comment_num}}
				</text>
			</view>

		</view>
		<!-- 精选评论 -->
		<view class="pinglun">
			<view class="tittle">
				<text class="text-big">精选评论</text>
				<view class="text-small" @click="tocomment(class_id,details.classs_id)">
					<image class="icon-der" src="../../static/img/7/7-14.png" mode=""></image>写评论
				</view>
			</view>
			<List :type="type" :id="details.id"></List>
		</view>
	</view>
</template>

<script>
	import List from "../../components/brand-list/list.vue"
	export default {
		components: {
			List
		},
		data() {
			return {
				falg: 0,
				cateMaskState: 0, //分类面板展开状态

				loadingType: 'more', //加载更多状态
				filterIndex: 0,
				cateId: 0, //已选三级分类id
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				cateList: [],
				goodsList: [],
				type: 'text',
				details: [],
				goodslist: [],
				class_id: '',
				isCollect:false

			}
		},
		onLoad(options) {
			this.class_id = options.id
			this.loadData(options.id)
		},
		methods: {
			loadData(id) {
				this.$Request.post4(
					this.$api.httpApi.special.detail, {
						topic_id: id
					}
				).then(res => {
					if (res.code == 1) {
						this.details = res.data
						this.getGoods(res.data.goods)

					}
				})
				
				if (this.$SysCache.get("token")) {
					this.$Request.post4(
						this.$api.httpApi.special.checkCollection, {
							type: 2,
							collected_id:this.class_id,
							uid:this.$SysCache.get("userInfo").id
						}
					).then(res => {
						if (res.code == 1) {
							if(res.data.is_collected == 1){
								this.isCollect = true
							}else{
								this.isCollect = false
							}
							
						}
					})
				}

				


			},
			tabClick(index) {
				console.log(index)
				this.falg = index
				if (this.filterIndex === index && index !== 2) {
					return;
				}
				this.filterIndex = index;
				if (index === 2) {
					this.priceOrder = this.priceOrder === 1 ? 2 : 1;
				} else {
					this.priceOrder = 0;
				}
				this.isshow = true

				// uni.showLoading({
				// 	title: '正在加载',
				// 	'font-size':"28upx"
				// })
			},
			getGoods(val) {
				this.goodslist = []
				for (const i in val) {

					this.$Request.get(this.$api.httpApi.goods.iteminfo + '&id=' + val[i].id + '&token=' + this.$SysCache.get('token'))
						.then(
							res => {
								if (res.code == 200) {

									this.goodslist.push(res.data)

								}
							})

				}
			},
			tocomment(id, class_id) {
				this.$Request.post(this.$api.httpApi.car.list + "&token=" + this.$SysCache.get('token')).then(res => {
					if (res.code == 200) {
						uni.navigateTo({
							url: `/pages/special/comment?id=${id}&class_id=${class_id}`
						})
					}
				})



			},
			navToDetailPage(id) {
				//测试数据没有写id，用title代替
				uni.navigateTo({
					url: `/pages/detail/index?id=${id}`
				})
			},
			collect() {
				var that = this
				let type = 1
				if(this.isCollect){
					type = 4
				}else{
					type = 1
				}
				this.$Request.post(
					this.$api.httpApi.user.userinfo + '&token=' + this.$SysCache.get('token'),
				).then(res => {
					if (res.code == 200) {

						that.$Request.post4(
							that.$api.httpApi.special.topicCollect, {
								uid: res.data.id,
								topic_id: that.class_id,
								type:type
							}
						).then(resd => {
							if (resd.code == 1) {
								// that.commentList = resd.data.data
								uni.showModal({
									title: '提示',
									content: resd.msg,
									success: function(resd) {
										if (resd.confirm) {
											that.loadData(that.class_id)
										} else if (resd.cancel) {
											that.loadData(that.class_id)
										}
									}
								})


							}
						})
					}
				});


			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #E9E9E9;
	}

	.banner {
		width: 100%;
		height: 313upx;
	}

	.tittle {
		width: 100%;
		display: flex;
		padding: 20upx 0;
		justify-content: space-between;
		background: #fff;
		border-bottom: 1px solid #F2F2F2;

		.text-small {
			color: #999;
			font-size: 25upx;

			image {
				width: 27upx;
				height: 27upx;
				vertical-align: middle;
				margin-right: 10upx;
			}
		}

		.text-big {
			font-size: 28upx;
			font-weight: bold;
		}

	}

	.shaer-main {
		width: 100%;
		background: #fff;
		padding: 44upx 36upx;
		margin: 20upx 0;

		.btn {
			width: 100%;
			text-align: center;
			color: #fff;
			font-size: 27upx;
			background: #F0406F;
			height: 68upx;
			line-height: 68upx;
			border-radius: 34px;
		}

		.shaer-text {
			color: #CCCCCC;
			font-size: 23upx;
			text-align: center;
			margin: 48upx 0;
		}

		.share-icon {
			display: flex;
			justify-content: space-between;

			text {
				color: #999999;
				font-size: 21upx;

				image {
					vertical-align: middle;
					margin-right: 5upx;
				}
			}

		}

		.icon-sc {
			width: 26upx;
			height: 24upx;
		}

		.icon-eye {
			width: 31upx;
			height: 18upx;
		}

		.icon-zf {
			width: 23upx;
			height: 23upx;
		}

		.icon-pl {
			width: 26upx;
			height: 24upx;
		}
	}

	.goods-main {
		width: 90%;
		margin: 20upx auto;
		display: flex;
		justify-content: space-between;

		.goods-img {
			width: 267upx;
			height: 268upx;
			background: #fff;
			padding: 26upx;

			image {
				width: 215upx;
				height: 215upx;
			}
		}

		.desc {
			background: #fff;
			width: 419upx;
			height: 268upx;
			margin-left: 13upx;
			padding: 27upx;

			.text-til {
				color: #333333;
				font-size: 27upx;
				font-weight: bold;

				.hot {
					font-size: 22upx;
					color: #FFFFFF;
					background: #F0406F;
					display: inline-block;
					width: 57rpx;
					height: 34rpx;
					line-height: 34upx;
					text-align: center;
					border-radius: 10upx;
					margin-right: 10upx;
					font-weight: 300;
					font-size: 22upx;
				}
			}

			.goods-price {
				color: #F0406F;
				font-size: 32upx;
				display: flex;
				justify-content: space-between;
				margin: 25upx 0;
				font-weight: bold;

				.goods-hp {
					color: #888;
					font-size: 19upx;
					font-weight: 300;
				}
			}

			.goods-icon {
				margin-top: 20upx;
				display: flex;
				justify-content: space-between;

				image {
					width: 44upx;
					height: 43upx;
				}

			}
		}

	}

	.hot-content {
		background: #fff;

		.text {
			color: #333;
			font-size: 21upx;
			padding: 40upx;
			font-weight: bold;

		}

		.text.yell {
			color: #DB5A0A;
		}

		.text.big {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #F2F2F2;

			.textbigL .big-top {
				font-size: 34upx;
				font-weight: bold;
			}

			.textbigR {
				color: #DB5A0A;
				font-size: 22upx;
				line-height: 26px;

				.big {
					font-size: 92upx;
				}

				.small {
					font-size: 55upx;
				}
			}

			.line {
				width: 35upx;
				height: 4upx;
				background: #333333;
				display: block;
				margin-top: 10upx;
			}

			.text-day {
				line-height: 10upx;
				margin-top: -16upx;
				display: block;
			}
		}

		.hot-img {
			width: 100%;
			height: 500upx;
		}
	}

	.item {
		margin-bottom: 0;
	}

	.pinglun {
		width: 100%;
		margin: 0 auto;
		background: #fff;
		padding: 0 5%;
	}
</style>
